<template>

	<view class="wp" :class="`app-theme${app_theme}`">
		<myNav :bg_show="true" :img_show="false" :is_return="true">
			uniapp 扩展图标
		</myNav>
		<view class="page-content">
			<text class="header">动态 Unicode 渲染方式</text>
			<view class="icon-content">
				<view v-for="(item,index) in customIcons" :key="index">
					<uni-icons fontFamily="MyIcons" :size="26" color="blue">{{item.unicode}}</uni-icons>
					<text>{{item.name}}</text>
				</view>
			</view>


			<text class="header">静态 Unicode 渲染方式</text>
			<view class="icon-content">
				<uni-icons fontFamily="MyIcons" :size="26" color='red'>&#xe605</uni-icons>
				<text>walk</text>
			</view>
		</view>
	</view>

</template>
<script setup>
	import myNav from '@/pages/components/myNav.vue'
	import {
		ref
	} from 'vue';
	//
	const customIcons = ref([{
			name: "walk",
			unicode: '\ue605', //&#xe605

		},
		{
			name: "subway",
			unicode: "\ue606", //&#xe606
		},
		{
			name: "aquatic",
			unicode: "\ue607", // &#xe607
		},
		{
			name: "run",
			unicode: "\ue608", // &#xe608
		},
		{
			name: "cycling",
			unicode: "\ue609", // &#xe609
		},
		{
			name: "drive",
			unicode: "\ue60a", //&#xe60a
		},
		{
			name: "bus",
			unicode: "\ue60b", //&#xe60b
		}
	])
</script>
<style>
	.page-content {
		background-color: #fff;
		margin: 10rpx 20rpx;

		.header {
			font-size: 50rpx;
			font-weight: 700;
		}
	}
</style>